<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>加工问题</span>
                </h3>
                <span class="m-section__sub">
                    导管加工问题及处理
                </span>
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="m-form m-form--label-align-right">
                    <form class="horizontal-form" (ngSubmit)="getReport()">
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="FilterPicNo" class="control-label">图号</label>
                                    <input id="FilterPicNo" type="text" name="FilterPicNo" class="form-control"
                                        [(ngModel)]="filterProductionDrawingCode">
                                </div>
                            </div>
                        </div>
                        <div *ngIf="advancedFiltersAreShown" class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="FilterModel" class="control-label">型号</label>
                                    <input id="FilterModel" name="FilterModel" type="text" class="form-control"
                                        [(ngModel)]="filterTaskModel">
                                </div>
                            </div>
                            <div class="col-md-3">
                                    <div class="form-group">
                                            <label class="m-checkbox">
                                                    <input type="checkbox" name="OnlyUntreated" [(ngModel)]="filterOnlyUntreated">
                                                    只显示未处理
                                                    <span></span>
                                                </label>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                        <div class="form-group">
                                                <button (click)="getReport()" class="btn btn-primary"><i class="fa fa-plus"></i> 查询</button>
                                        </div>
                                    </div>
                        </div>
                        <div class="row m--margin-bottom-10">
                            <div class="col-sm-6">
                                <span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-down"></i> 显示更多</span>
                                <span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown"
                                    (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i
                                        class="fa fa-angle-up"></i> 收起</span>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="row align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelperNormalReport.isLoading">
                        <p-table #dataTableNormalProductions [value]="primengTableHelperNormalReport.records"
                            (onLazyLoad)="getReport($event)"
                            rows="{{primengTableHelperNormalReport.defaultRecordsCountPerPage}}" [paginator]="false"
                            [lazy]="true" scrollable="true" ScrollWidth="100%"
                            responsive="primengTableHelperNormalReport.isResponsive"
                            resizableColumns="primengTableHelperNormalReport.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th>
                                        操作
                                    </th>
                                    <th pSortableColumn="drawingCode">
                                        图号
                                        <p-sortIcon field="drawingCode"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="model">
                                        型号
                                        <p-sortIcon field="model"></p-sortIcon>
                                    </th>
                                    <th>
                                        问题描述
                                    </th>
                                    <th pSortableColumn="requesterId">
                                        提出人
                                        <p-sortIcon field="requesterId"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="creationTime">
                                        提出时间
                                        <p-sortIcon field="creationTime"></p-sortIcon>
                                    </th>
                                    <th pSortableColumn="responder">
                                        处理人
                                        <p-sortIcon field="responder"></p-sortIcon>
                                    </th>
                                    <th>
                                        处理结果
                                    </th>
                                    <th>
                                        处理时长
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td>
                                        <span class="ui-column-title" *ngIf="!record.responder">操作</span>
                                        <button *ngIf="!record.responder" class="btn btn-sm btn-primary"
                                            (click)="respondModal.show(record.id,record.instanceId)">
                                            <i class="fa fa-cog"></i><span class="caret"></span> 处理
                                        </button>
                                    </td>
                                    <td>
                                        <span class="ui-column-title">图号</span>
                                        {{ record.drawingCode}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">型号</span>
                                        {{ record.model}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">问题描述</span>
                                        {{ record.requestInfo}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">提出人</span>
                                        {{ record.requesterId}}
                                    </td>

                                    <td>
                                        <span class="ui-column-title">提出时间</span>
                                        {{ record.creationTime | date:'yyyy-MM-dd HH:mm'}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">处理人</span>
                                        {{ record.responder}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">处理结果</span>
                                        {{ record.respondInfo}} <br> {{ record.respondOperation}}
                                    </td>
                                    <td>
                                        <span class="ui-column-title">处理时长</span>
                                        <label *ngIf="record.responder">
                                            {{((record.respondTime - record.creationTime) / (60 * 60 *1000)).toFixed(1)}}小时</label>
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelperNormalReport.totalRecordsCount == 0">
                            没有数据
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator [rows]="primengTableHelperNormalReport.defaultRecordsCountPerPage"
                                #paginatorNormal (onPageChange)="getReport($event)"
                                [totalRecords]="primengTableHelperNormalReport.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelperNormalReport.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                共 {{primengTableHelperNormalReport.totalRecordsCount}} 条
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<respondModal #respondModal (modalSave)="getReport()"></respondModal>